<template>
    <div class="header">
        <div class="header_icon iconfont">
&#xe6bf;
        </div>
        <div class="header_content">
            <div class="header_content_img">

            </div>
            <div class="header_content_title">
热心市民李先生
            </div>
            <div class="header_content_star">
                <div class="header_content_star-icon ">

<div class="header_content_star-icon-inner iconfont">&#xe6f8; </div>
                </div>
                <div class="header_content_star-number">
16
                </div>
            </div>
            <div class="header_content_id">
                ID: 1069643013
            </div>
            <div class="header_content_line">

            </div>
            <div class="header_other">
                <div class="header_other_info">
                    <div class="header_other_top">
                        红包
                    </div>
                    <div class="header_other_bottom">
                        218
                    </div>
                </div>
                 <div class="header_other_info">
                    <div class="header_other_top">
                        红包
                    </div>
                    <div class="header_other_bottom">
                        218
                    </div>
                </div>
                  <div class="header_other_info">
                    <div class="header_other_top">
                        红包
                    </div>
                    <div class="header_other_bottom">
                        218
                    </div>
                </div>
                  <div class="header_other_info">
                    <div class="header_other_top">
                        红包
                    </div>
                    <div class="header_other_bottom">
                        218
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="content-wrap">


    <div class="content">
        <div class="content_money">
            <div class="content_icon iconfont content_icon_money">
&#xe663;
            </div>
            <div class="content_title">
我的钱包
            </div>
            <div class="content_access">
 &gt; 
            </div>
        </div>
             <div class="content_address" @click="handleAccessAddress"> 
            <div class="content_icon iconfont content_icon_address">
&#xe602;
            </div>
            <div class="content_title">
我的地址
            </div>
            <div class="content_access" >
 &gt; 
            </div>
        </div>
                <div class="content_help">
            <div class="content_icon iconfont content_icon_help">
&#xe698;
            </div>
            <div class="content_title">
客服与帮助
            </div>
            <div class="content_access">
 &gt; 
            </div>
        </div> 
    </div>
    </div>
     <Docker :currentIndex="3"/>
</template>
<script>
import { useRouter} from 'vue-router'
import Docker from '../../components/Docker'
export default{
  name: 'Mine',
  components: { Docker },
  setup () {
      const router = useRouter();
      const handleAccessAddress = () => {
         router.push({ name: 'AddressManager' })
      } 
      return { handleAccessAddress }
  }
}
</script>
<style scoped lang="scss">
.header{
    height: 3.11rem;
    background-size: 100% 2.5rem;
    background-image: linear-gradient(239deg, #3A6FF3 0%, #50C7FB 100%);
    background-repeat: no-repeat;
    &_icon{
        position: absolute;
        top: .4rem;
        right: .21rem;
        color:#fff;
    }
    &_content{
        position: absolute;
        margin: 1.08rem .18rem 0 .18rem;
        width:3.39rem;
        height: 2.03rem;
        background: #fff;
        box-shadow: 0 .08rem .16rem 0 rgba(0,0,0,0.08);
        border-radius: .08rem;
        &_img{
            width: .94rem;
            height: .94rem;
            border-radius: 50%;
            background: aqua;
            position: absolute;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        &_title{
            margin-top: .59rem;
            font-size: .24rem;
            color: #262628;
            text-align: center;
            line-height: .36rem;
        }
        &_star{
            width: .35rem;
            height: .15rem;
            background-image: linear-gradient(180deg, #BEE700 0%, #8ACA00 100%);
            border-radius: 100rem;
            position: absolute;
            top: .7rem;
            right: .37rem;
            display: flex;
            &-icon{
                line-height: .15rem;
                width: .11rem;
                height: .11rem;
                border-radius: 50%;
                // position: absolute;
                // top: .01rem;
                // left:.02rem;
                transform: translate(.02rem, .02rem);
                background: #8FB200;
                &-inner{
                color: #FFC700;
                transform: translate(-.02rem, -.02rem);

                }
            }
            &-number{
                flex: 1;
                text-align: center;
                line-height: .15rem;
                font-size: .2rem;
                transform: scale(.5);
                color: #FFF;
            }
        }
        &_id{
            margin-top:.02rem;
            font-size: .14rem;
            color: #C1C0C9;
            line-height: .2rem;
            text-align: center;
        }
        &_line{
            width: 3.39rem;
            height: .01rem;
            background: #F1F1F1;
            margin: .12rem 0;

        }
    }
    &_other{
        display: flex;
        &_info{
            flex: 1;
        }
        &_top{
           font-size: .12rem;
            color: #C1C0C9;
            text-align: center; 
            line-height: .17rem;
        }
        &_bottom{
            font-size: .2rem;
            color: #262628;
            text-align: center;
            line-height: .28rem;
        }
    }
}
.content-wrap{
    background: #FFFFFF;
}
.content{
    position: absolute;
    top:3.27rem;
    left: .18rem;
    right: .18rem;
    width: 3.39rem;
    height: 1.46rem;
    background: #FFFFFF;
    box-shadow: 0 .08rem .16rem 0 rgba(0,0,0,0.08);
    border-radius: .08rem;
    &_money{
        display: flex;
        margin-top: .17rem;
        line-height: .22rem;
 
    }
    &_icon{
            width: .22rem;
            height: .22rem;
            margin-left: .16rem;
            margin-right:.12rem;
            // background: red;
            &_money{
                color:#ED4A47;
            }
            &_address{
                color:#32C5FF
            }
            &_help{
                color:#9925FE;
            }
        }
        &_title{
            flex:1;
            font-size: .14rem;
            color: #262626;

        }
    &_access{
        color: #C2C4CA;
        width: .07rem;
        height: .12rem;
        margin-right: .16rem;
    }
    &_address{
        display: flex;
        margin: .24rem 0;
        line-height: .22rem;
    }
    &_help{
        display: flex;
        margin-bottom: .17rem;
        line-height: .22rem;
    }
}
</style>
